<template>
  <div class="cp-box moudle-b">
    <div class="cp-header">
      <img class="cp-icon" src="../../assets/mini_accident/cp04.png" alt="">
      <h4 class="cp-title">补充材料</h4>
    </div>
    <div v-if="answeringState" class="cp-content">
      <div class="cpc-btn-box">
        <el-button type="primary" v-on:click="handlePDFPreview">还贷提取受理回执</el-button>
      </div>
      <p class="cpc-title">补充材料1</p>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="description">
      </el-input>
      <p class="cpc-title">补充材料2</p>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="law">
      </el-input>
      <p class="cpc-title">补充材料3</p>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="rule">
      </el-input>
    </div>
    <ul v-else class="no-data">
      <img class="nd-img" src="../../assets/mini_accident/no_data.png" alt="">
      <span>暂无信息</span>
    </ul>
    <el-dialog width="70%" :visible.sync="dialogVisiblePdf" title="责任认定书">
      <div>
        <p>操作步骤</p>
        <p>1、发送责任认定书（无签名）</p>
        <p>2、当事人签名。如当事人看不到签名页面，提示当事人返回到上一页的视频界面</p>
        <p>3、保存签名信息</p>
      </div>
      <div class="layout-rend" style="margin: 0px 0px 16px 0px">
        <el-button type="primary" @click="accidentDutyTap">发送责任认定书（无签名）</el-button>
        <el-button type="primary" @click="sendSignTap">当事人签名</el-button>
        <el-button type="primary" @click="handlePDFPreview">保存签名信息</el-button>
      </div>
      <iframe :src="pdfPreviewUrl | fileFilter" width="100%" height="100%" frameborder="1" style="height: 540px;"/>
    </el-dialog>
    <el-dialog width="70%" :visible.sync="showSign" title="签字信息">
      <div class="sign-box">
        <template v-for="(item, index) in personInfoList">
          <div v-bind:key="index">
            <p>{{ item.name }}</p>
            <img class="img-a" v-bind:src="item.sign | fileFilter" alt="">
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import WebSocketUtil from "@/util/WebSocketUtil";
import CommonFilters from "@/mixins/CommonFilters";
// import TimeUtil from "@/util/TimeUtil";
import {saveAccident} from "@/api/bureau/miniaccident/miniaccident";
import {getStore} from '@/util/store'

export default {
  name: "ExpressCenterProtocol",
  mixins: [CommonFilters],
  data() {
    return {
      pdfPreviewUrl: "",
      dialogVisiblePdf: false
    };
  },
  computed: {
    answeringState() {
      return this.$store.state.MiniAccident.answeringState;
    },
    showSign: {
      get() {
        return this.$store.state.HousingInfo.showSign;
      },
      set(value) {
        this.$store.commit('setShowSign', value);
      }
    },
    personInfoList() {
      return this.$store.state.HousingInfo.personInfoList;
    },
    description: {
      get() {
        return this.$store.state.HousingInfo.description;
      },
      set(value) {
        this.$store.commit('setDescription', value);
      }
    },
    law: {
      get() {
        return this.$store.state.HousingInfo.law;
      },
      set(value) {
        this.$store.commit('setLaw', value);
      }
    },
    rule: {
      get() {
        return this.$store.state.HousingInfo.rule;
      },
      set(value) {
        this.$store.commit('setRule', value);
      }
    }
  },
  mounted() {

  },
  methods: {
    handlePDFPreview() {
      let that = this;
      let _incomingMessage = that.$store.state.MiniAccident.incomingMessage;
      let _accidentInfo = that.$store.state.AccidentInfo;
      let _userInfo = getStore({name: 'userInfo'});
      //gxj 这里不需要转换时间，接口使用正常的时间。在描述使用timereplace，将xxxx-xx-xx xx:xx:xx格式转换成x年x月x日 x时x分 许
      // let _accidentTime = TimeUtil.timeReplace(_accidentInfo.accidentTime);
      // let _accidentTime = _accidentInfo.accidentTime;
      let params = {
        userId: _userInfo.userId,
        bizId: _incomingMessage.bizId,
        weather: _accidentInfo.weather,
        accidentTime: _accidentInfo.accidentTime,
        accidentAddress: _accidentInfo.accidentAddress,
        description: _accidentInfo.description,
        law: _accidentInfo.law,
        rule: _accidentInfo.rule,
        userInfos: _accidentInfo.personInfoList,
        imageInfos: _accidentInfo.imageInfoList,
      }
      saveAccident(params).then(function (response) {
        that.dialogVisiblePdf = true;
        that.pdfPreviewUrl = response.data.data.duty;
      });
    },
    accidentDutyTap() {
      let that = this;
      let _incomingMessage = this.$store.state.MiniAccident.incomingMessage;
      WebSocketUtil.sendWebSocket({ // 向客户端发送责任书
        cmd: 4,
        msg: _incomingMessage.callerId,
        groupId: _incomingMessage.roomId,
        pdfUrl: that.pdfPreviewUrl
      });
    },
    sendSignTap() {
      let _incomingMessage = this.$store.state.MiniAccident.incomingMessage;
      WebSocketUtil.sendWebSocket({ // 向客户端发送签字信息
        cmd: 5,
        msg: _incomingMessage.callerId,
        groupId: _incomingMessage.roomId,
        personInfoList: this.personInfoList
      });
    }
  }
};
</script>

<style scoped lang="scss">
@import 'src/styles/callpolice';

.cp-content {

}

.cpc-btn-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 20px 0px 0px 0px;
}

.sign-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.cpc-title {
  font-size: 14px;
  margin: 10px 0px 10px 0px;
}

.img-a {
  width: 420px;
  height: 200px;
}
</style>
